<template>
  <div style="background-color:white;height:500px">
    <el-page-header @back="goBack" content="文章编辑"></el-page-header>
    <div class="div1" style="margin:20px 0;">
      <el-input v-model="titleinput" placeholder="请输入文章标题（5~30个字）" class="titleinput" size="medium" minlength="5"
                maxlength="30" show-word-limit>
        <el-select v-model="articleType" slot="prepend" placeholder="文章类型" style="width:120px">
          <el-option label="问题讨论" value="问题讨论"></el-option>
          <el-option label="面试经历" value="面试经历"></el-option>
          <el-option label="技术交流" value="技术交流"></el-option>
          <el-option label="企业内推" value="企业内推"></el-option>
          <el-option label="面试技巧" value="面试技巧"></el-option>
        </el-select>
        <el-button slot="append" type="primary" round size="small" icon="el-icon-plus" @click="publish">发布文章</el-button>
      </el-input>
    </div>
    <div class="div2" style="height:400px;">
      <mavon-editor
          v-model="editorContent"
          :ishljs="true"
          :autofocus="false"
          style="height:100%"
      ></mavon-editor>
    </div>

  </div>
</template>

<script>
import {mavonEditor} from 'mavon-editor'
import 'mavon-editor/dist/css/index.css';
import {addArticle, editArticle} from "@/network/recruit";

export default {
  name: 'MarkDown',
  components: {
    mavonEditor
  },
  data() {
    return {
      titleinput: "",
      editorContent: "",
      articleId: '',
      articleType: '',
      userName:''
    }
  },
  created() {
    let article = this.$route.params.key;
    if(article!=null){
      this.articleId = article.articleId;
      this.editorContent= article.articleContent;
      this.titleinput=article.articleTitle;
      this.articleType=article.articleType;
    }
    if(localStorage.getItem("common_userName")){
      this.userName = localStorage.getItem("common_userName");
    }
  },
  methods: {
    publish() {
      if (this.titleinput == null || this.titleinput == '') {
        this.$message.warning("标题不能为空");
        return;
      }
      if (this.articleType == null || this.articleType == '') {
        this.$message.warning("请选择文章类型");
        return;
      }
      if (this.editorContent == null || this.editorContent == '') {
        this.$message.warning("内容不能为空");
        return;
      }

      if(this.articleId==undefined||this.articleId==''){
        addArticle(this.userName,this.titleinput,this.editorContent,this.articleType).then(res => {
          if (res != undefined) {
            this.$message.success("发布成功");
            this.titleinput = "";
            this.editorContent = "";
            this.articleType = '';
          }
        })
      }else {
        editArticle(this.articleId,this.titleinput,this.editorContent,this.articleType).then(res => {
              if (res != undefined) {
                this.$message.success("发布成功");
                this.titleinput = "";
                this.editorContent = "";
                this.articleType = '';
              }
            })
      }

    },
    goBack() {
        this.$router.push({name:"articleManage"});
    }
  }
}
</script>

<style scoped>


</style>
